<template>
  <div>
    <el-button type="primary" @click="addDialogVisible = true" class="addInfo">新增</el-button>
    <el-dialog
      title="新增"
      :visible.sync="addDialogVisible"
      width="35%"
      :before-close="handleClose">
      <el-form :model="teacherForm" status-icon :rules="addRules" 
      ref="teacherForm" label-width="60px" class="demo-ruleForm addForm" :hide-required-asterisk="true" >
        <el-form-item label="工号" prop="id">
          <el-input v-model="teacherForm.id"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="teacherForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="teacherForm.sex">
            <el-option label="女" value="女"></el-option>
            <el-option label="男" value="男"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="school">
          <el-input v-model="teacherForm.school"></el-input>
        </el-form-item>
        <el-form-item label="系别" prop="department">
          <el-input v-model="teacherForm.department"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-table
    :data="teacherData"
    border
    style="width: 100%"
    max-height="470px">
      <el-table-column
        prop="id"
        label="工号"
        width="180"
        :resizable="false"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        :resizable="false"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="160"
        :resizable="false"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="school"
        label="学院"
        width="223"
        :resizable="false"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="department"
        label="系别"
        width="223"
        :resizable="false"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column label="操作" :resizable="false" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            class="edit"
            @click="handleEdit(scope.row)">编辑</el-button>
            <el-dialog
              title="修改信息"
              :visible.sync="EditDialogVisible"
              width="35%"
              :before-close="handleClose">
                <el-form :model="changeInfo" status-icon :rules="changeRules" ref="changeInfo" label-width="60px" class="demo-ruleForm changeForm" :hide-required-asterisk="true">
                  <el-form-item label="学院" prop="school">
                    <el-input v-model="changeInfo.school"></el-input>
                  </el-form-item>
                  <el-form-item label="系别" prop="department">
                    <el-input v-model="changeInfo.department"></el-input>
                  </el-form-item>
                </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="EditDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editInfo">确 定</el-button>
              </span>
            </el-dialog>
          <el-button
            size="mini"
            type="danger"
            class="delete"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getAllUserInfo } from '@/api/user'
import { register } from '@/api/user'
import { updateUserInfo } from '@/api/user'
import { deleteUser } from '@/api/user'
export default {
  data(){
    return{
      addDialogVisible:false,
      EditDialogVisible:false,
      row:null,
      teacherData:[],
      teacherForm:{
        id:'',        
        name:'',        
        sex:'男',        
        school:'',        
        department:''  
      },
      addRules:{
        id:[
          {required:true,message:'工号不能为空',trigger:'blur'},
          {pattern:/^\d+/,message:'工号不能包含字母及其他字符',trigger:'blur'}
        ],
        name:[
          {required:true,message:'姓名不能为空',trigger:'blur'},
          {pattern:/^\S{2,}/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ],
        sex:[
          {required:true,message:'性别不能为空',trigger:'blur'},
        ],
        school:[
          {required:true,message:'学院不能为空',trigger:'blur'},
          {pattern:/^\S{2,}/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ],
        department:[
          {required:true,message:'系别不能为空',trigger:'blur'},
          {pattern:/^\S{2,}/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ]
      },
      changeInfo:{
        school:'',        
        department:''
      },
      changeRules:{
        school:[
          {required:true,message:'学院不能为空',trigger:'blur'},
          {pattern:/^\S{2,}/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ],
        department:[
          {required:true,message:'系别不能为空',trigger:'blur'},
          {pattern:/^\S{2,}/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ]
      }
    }
  },
  methods:{
    addInfo(){
      this.addDialogVisible = false
      this.$refs.teacherForm.validate((valid)=>{
        if(valid){
          register({...this.teacherForm,status:'教师'}).then(res=>{
            if(res.data.status===0){
              this.$nextTick(()=>{
                getAllUserInfo('教师').then(res=>{
                  if(res.data.status===0){
                    this.teacherData=res.data.data
                  }else{
                    alert('注册失败！')
                  }
                })
              })
              alert('注册成功！')
              this.$refs.teacherForm.resetFields()
            }
          })
        }
      })
    },
    handleEdit(row){
      this.EditDialogVisible = true
      this.row=row
    },
    editInfo(){
      this.EditDialogVisible = false
      this.$refs.changeInfo.validate((valid)=>{
        if(valid){
          updateUserInfo({...this.changeInfo,id:this.row.id,status:'教师'}).then(res=>{
            if(res.data.status===0){
              this.$nextTick(()=>{
                getAllUserInfo('教师').then(res=>{
                  if(res.data.status===0){
                    this.teacherData=res.data.data
                  }else{
                    alert('修改失败！')
                    this.$refs.changeInfo.resetFields()
                  }
                })
              })
              alert('修改成功！')
              this.$refs.changeInfo.resetFields()
            }
          })
        }
      })
    },
    handleDelete(row){
      deleteUser({id:row.id,status:'教师'}).then(res=>{
        if(res.data.status===0){
          this.$nextTick(()=>{
            getAllUserInfo('教师').then(res=>{
              if(res.data.status===0){
                this.teacherData=res.data.data
              }else{
                alert('删除失败！')
              }
            })
          })
          alert('删除成功！')
        }
      })
    },
    handleClose(done){
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  },
  mounted(){
    this.$nextTick(()=>{
      getAllUserInfo('教师').then(res=>{
        if(res.data.status===0){
          this.teacherData=res.data.data
        }
      })
    })
  }
}
</script>

<style scoped>
.addInfo{
  float: right;
  margin-right: 15px;
  margin-bottom: 10px;
}
.delete{
  margin-left: 12px;
}
.addForm,
.changeForm{
  width: 75%;
  margin:auto;
}
</style>